<template>
	<view>
		<view class="u-m-t-26">
			<view class="u-flex u-row-between u-p-30 u-white-bg">
				<!-- 标题 -->
				<view class="apply-grid-title">
					{{title}}
				</view>
				<!-- 编辑那  父组件传参不等于-1的都显示-->
				<view :data-index="editType"
				 v-if="editType !== -1"
				  class="apply-edit-btn" @click="toUsed">
					<u-icon name="edit-pen"></u-icon>
				</view>
			</view>
		</view>
		<view class="apply-grid-box u-flex u-flex-wrap">
			<view class="apply-grid-item" v-for="(item, i) in list" :key="i" @click="itemClick(item)">
				<view class="apply-icon" :style="{backgroundColor: bgJson?JSON.parse(item.propertyJson).iconBackgroundColor:item.iconBackground}">
					<text :class="item.icon"></text>
				</view>
				<view class="apply-label">
					{{item.fullName}}
				</view>
				<!-- 增加或者删除按钮  可以添加就增加样式active-->
				<!-- selApply---indexOf存在的 就disabled -->
				<!-- editBtn控制是否显示右侧编辑按钮 -->
				<view class="edit-btn" 
				:class="{ active: editBtn === 1, disabled: isSel(item) !== -1}"
				 v-if="editBtn !== -1"
				  @click="edit(item, i)">
				  <!-- 图标是添加还是减少 -->
					<u-icon :name="editBtnName[editBtn]"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editBtnName: ['minus', 'plus']
			}
		},
		props: {
			title: String,
			list: {
				type: Array,
				default() {
					return []
				}
			},
			editType: {
				type: [Number, String],
				default: -1
			},
			bgJson: {
				type: Boolean,
				default: false
			},
			editBtn: {
				type: [Number, String],
				default: -1
			},
			selApply: {
				type: Array,
				default() {
					return []
				}
			}
		},
		mounted(){
			console.log(this.list,"过滤出已存在的",this.selApply)
		},
		methods: {
			itemClick(item) {
				console.log("apply-grid",item)
				this.$emit('item-click', item)
			},
			// 去编辑当前项应用
			toUsed() {
				this.$u.route('pages/work/used-apply', {type: this.editType})
			},
			//控制加减号 disabled样式 
			isSel(pItem) {
				let res = this.selApply.findIndex(item => {
					return item.fullName === pItem.fullName
				})
				return res
			},
			// 点击加号或者减号
			edit(pItem, i) {
				console.log("this.editBtn",this.editBtn)
						// 点击按钮 如果是0 就是减少，顶部列表 删除一个
				if (this.editBtn === 0) {
					this.list.splice(i, 1)
				} else {
					// 如果是1 就添加
					let _i = this.isSel(pItem)
					if (_i === -1) {
						this.selApply.push(pItem)
					}
					// this.list
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply-grid-title {
		padding-left: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.apply-edit-btn {
		display: block;
		width: 50rpx;
		height: 50rpx;
		font-size: 32rpx;
		text-align: center;
	}
	.apply-grid-box {
		padding: 0 30rpx;
		background-color: #FFFFFF;
		.apply-grid-item {
			position: relative;
			margin-bottom: 30rpx;
			width: 25%;
			text-align: center;
			.apply-icon {
				display: inline-block;
				width: 126rpx;
				height: 126rpx;
				line-height: 126rpx;
				border-radius: 44rpx;
				color: #FFFFFF;
				background-color: #0071C5;
				text {
					font-size: 60rpx;
				}
			}
			.apply-label {
				padding-top: 15rpx;
				font-size: 24rpx;
			}
			.edit-btn {
				position: absolute;
				top: -25rpx;
				right: 8rpx;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 50%;
				color: #FFFFFF;
				background-color: #f00;
			}
			.edit-btn.active {
				background-color: #22ABEC;
			}
			.edit-btn.disabled {
				background-color: #CCCCCC;
			}
		}
	}
</style>
